<template>
    <div class="location-filter">
      <el-select v-model="selectedType" clearable placeholder="选择类型" @clear="handleClearType">
        <el-option
          v-for="type in types"
          :key="type"
          :label="type"
          :value="type"
        />
      </el-select>
      <el-input
        v-model="searchTerm"
        placeholder="手动输入搜索"
        clearable
        style="margin-left: 10px;"
        @input="handleSearch"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, defineEmits } from 'vue';
  
  const types = ['华东', '华中及西南', '华北', '西北'];
  const selectedType = ref('');
  const searchTerm = ref('');
  
  const emit = defineEmits(['filterChanged']);
  
  const handleClearType = () => {
    selectedType.value = '';
    emit('filterChanged', { type: '', search: searchTerm.value });
  };
  
  const handleSearch = () => {
    emit('filterChanged', { type: selectedType.value, search: searchTerm.value });
  };
  </script>
  
  <style scoped>
  .location-filter {
    display: flex;
    align-items: center;
    width: 50%;
  }
  </style>
  